<template>
    <a-modal 
        v-model:visible="createVisible" 
        title="新增的demo" 
        @cancel="handleCancel"
        :maskClosable = "false"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>

      <template #footer>
        <a-button key="back" class="ant-btn-other" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
</template>

<script setup> //单文件组件写法 https://cn.vuejs.org/api/sfc-script-setup.html#basic-syntax
import { ref, toRefs } from 'vue';
const props = defineProps({ //定义上层组件传过来的值 的类型与默认值
    createVisible:{                   
        type:Boolean,
        default:false,
    },
})
const confirmLoading = ref(false);

const emit = defineEmits(["update:createVisible"]); //vue3可以用里面的update直接更改父组件绑定的值了 父组件必须写v-model

const handleOk = ()=>{
    console.log("onok");
}
const handleCancel = ()=>{
    console.log("handleCancel");
    emit('update:createVisible', false)
}
</script>